<template>
  <div class="chart">
    <el-row align="center">
      <div class="time">
        <el-date-picker
          v-model="startDate"
          placeholder="开始日期"
          type="date"
          :picker-options="options1"
        ></el-date-picker>
        <div
          class="time-line"
          style="width:10px;border-top:solid #948f8f 2px;height: 1px;margin-top: 15px;margin-left:4px;margin-right:4px"
        ></div>
        <el-date-picker v-model="endDate" placeholder="结束日期" type="date" :picker-options="options2"></el-date-picker>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          v-waves
          icon="el-icon-search"
          @click="onChangeDate"
        >确认</el-button>
      </div>
      <div class="chart-container">
        <div class="chart-container-item-left">
          <div class="chart-container-item-header">
            <div class="circle-style"></div>
            <div class="chart-container-item-title">
              <div class="circle-money"></div>
              <span>订单金额</span>
            </div>
            <div class="chart-container-item-amount">累计订单金额（元）：{{amountAndCount.orderTotalMoney}}</div>
          </div>
          <hr />
          <div class="inner" ref="chart1"></div>
        </div>
        <div class="chart-container-item-right">
          <div class="chart-container-item-header">
            <div class="chart-container-item-title">
              <div class="circle-order"></div>
              <span>订单数量</span>
            </div>
            <div class="chart-container-item-amount">累计订单数量（单）：{{amountAndCount.orderTotalAmount}}</div>
          </div>
          <hr />
          <div class="inner" ref="chart2"></div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
// import statementApi from '@/api/statement'
import dayjs from 'dayjs'
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
export default {
  props: {
    amountAndCount: Object
  },
  data () {
    return {
      chart1: undefined,
      chart2: undefined,
      xData: undefined,
      y1Data: undefined,
      y2Data: undefined,
      startDate: new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000),
      endDate: new Date()
    }
  },
  watch: {
    amountAndCount () {
      this.getData()
    }
  },
  computed: {
    options1 () {
      const endDate = this.endDate
      return {
        disabledDate (time) {
          if (time != null && endDate != null) {
            return time.getTime() > endDate.getTime()
          }
        }
      }
    },
    options2 () {
      const startDate = this.startDate
      return {
        disabledDate (time) {
          if (time != null && startDate != null) {
            return time.getTime() < startDate.getTime()
          }
        }
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    _dateToStr (d) {
      if (d != null) {
        return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
      } else {
        const dd = new Date()
        return `${dd.getFullYear()}-${dd.getMonth() + 1}-${dd.getDate()}`
      }
    },
    errorClick () {
      this.$message({
        showClose: true,
        message: '日期不能为空',
        type: 'error'
      })
    },
    onChangeDate () {
      if (this.startDate == null || this.endDate == null) {
        this.errorClick()
        return
      }
      const startDateStr = this._dateToStr(this.startDate) + ' 00:00:00'
      const endDateStr = this._dateToStr(this.endDate) + ' 23:59:59'
      this.$emit('changeDate', { startDateStr, endDateStr })
    },
    getData () {
      if (this.startDate == null || this.endDate == null) {
        this.errorClick()
        return
      }
      if (this.chart && this.endDate != null) {
        this.chart.showLoading()
      }
      this.xData = []
      this.y1Data = []
      this.y2Data = []

      const datas = this.amountAndCount.datas
      for (let i = 0; i < datas.length; i++) {
        this.xData.push(dayjs(datas[i].time).format('MM-DD'))
        this.y1Data.push(datas[i].orderMoney)
        this.y2Data.push(datas[i].orderAmount)
      }
      this.paint()
    },
    paint () {
      if (!this.chart1) {
        // 基于准备好的dom，初始化echarts实例
        const chart1 = this.$refs.chart1
        this.chart1 = echarts.init(chart1)
      } else {
        this.chart1.clear()
        this.chart1.hideLoading()
      }
      if (!this.chart2) {
        // 基于准备好的dom，初始化echarts实例
        const chart2 = this.$refs.chart2
        this.chart2 = echarts.init(chart2)
      } else {
        this.chart2.clear()
        this.chart2.hideLoading()
      }
      this.option1 = {
        grid: {
          left: 20,
          right: 20,
          top: 10,
          bottom: 20
        },
        tooltip: {
          trigger: 'axis',
          padding: [8, 12]
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          axisTick: {
            show: false,
            length: 4,
            lineStyle: {
              color: '#fff',
              type: 'solid',
              width: 1
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              type: 'solid',
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#292c38'
            }
          },
          axisTick: {
            show: false,
            length: 4,
            lineStyle: {
              color: '#fff',
              type: 'solid',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            },
            fontSize: 8
          },
          minInterval: 1
        },
        series: [
          {
            name: '订单金额',
            type: 'line',
            data: this.y1Data.map(x => x),
            itemStyle: {
              normal: {
                color: '#FFFF00',
                lineStyle: {
                  color: '#FFFF00' // 改变折线颜色
                }
              }
            }
          }
        ]
      }
      this.option2 = {
        grid: {
          left: 20,
          right: 20,
          top: 10,
          bottom: 20
        },
        tooltip: {
          trigger: 'axis',
          padding: [8, 12]
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          axisTick: {
            show: false,
            length: 4,
            lineStyle: {
              color: '#fff',
              type: 'solid',
              width: 1
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              type: 'solid',
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#292c38'
            }
          },
          axisTick: {
            show: false,
            length: 4,
            lineStyle: {
              color: '#fff',
              type: 'solid',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            },
            fontSize: 8
          },
          minInterval: 1
        },
        series: [
          {
            name: '订单数量',
            type: 'line',
            data: this.y2Data.map(x => x),
            itemStyle: {
              normal: {
                color: '#0000FF'
              }
            }
          }
        ]
      }
      // 绘制图表
      this.chart1.setOption(this.option1)
      this.chart2.setOption(this.option2)
      window.addEventListener('resize', () => {
        this.chart1.resize()
        this.chart2.resize()
      })
    }
  }
}
</script>

<style scoped>
.chart {
  margin: 10px 0;
  background: #fff;
}
.chart-container {
  display: flex;
}
.inner {
  height: 300px;
  width: 100%;
}
.time {
  height: 10%;
  margin-left: 1%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.chart-container-item-left {
  margin-top: 2%;
  width: 48%;
  /* background-color: rgb(248, 248, 248); */
  margin-left: 1%;
}
.chart-container-item-right {
  margin-top: 2%;
  width: 49%;
  /* background-color: rgb(248, 248, 248); */
  margin-left: 1%;
}
.chart-container-item-header {
  height: 30px;
  text-align: center;
}
.chart-container-item-title {
  margin-left: 10px;
  margin-top: 10px;
  font-size: 12px;
  float: left;
  display: flex
}
.chart-container-item-amount {
  margin-right: 10px;
  margin-top: 10px;
  font-size: 12px;
  float: right;
}
.circle-order {
  width: 8px;
  height: 8px;
  border: 1px solid #0000ff;
  background-color: #0000ff;
  border-radius: 8px;
  opacity: 0.5;
  margin-right: 5px;
  margin-top: 2px;
}
.circle-money {
  width: 8px;
  height: 8px;
  border: 1px solid #FFFF00;
  background-color: #FFFF00;
  border-radius: 8px;
  opacity: 0.5;
  margin-right: 5px;
  margin-top: 2px;
}
</style>
